<template>
  <div class="box">
    <div class="cardbox" v-for="item in list" :key="item.id">
      <!-- 商品卡片 -->
      <van-card
        class="vancard"
        :price="item.sell_price"
        desc="描述信息"
        :title="item.title"
        :thumb="item.thumb_path"
      >
        <div slot="tag" class="check">
          <!-- 复选按钮 -->
          <van-checkbox
            v-model="$store.getters.getGoodsSelected[item.id]"
            @change="selectedChanged(item.id,$store.getters.getGoodsSelected[item.id])"
          ></van-checkbox>
        </div>
        <div slot="footer" class="numbox">
          <!-- 商品数量 -->
          <numbox :initcount="$store.getters.getcount[item.id]" :goodsid="item.id"></numbox>
        </div>
      </van-card>
    </div>
    <!-- 提交订单栏 -->
    <van-submit-bar
      class="barsubit"
      :loading="load"
      :price="3050"
      button-text="提交订单"
      @submit="onSubmit"
    >
      &nbsp;&nbsp;
      <!-- <van-checkbox v-model="checked">全选</van-checkbox> -->
      <span slot="tip">
        你的收货地址不支持同城送,
        <span>修改地址</span>
      </span>
    </van-submit-bar>
  </div>
</template>

<script>
import numbox from "../subcomponents/ShopCart_numbox";
export default {
  data() {
    return {
      // checked: false,
      load: false,
      list: []
    };
  },
  created() {
    this.GetList();
  },
  methods: {
    GetList() {
      var idArr = [];
      this.$store.state.cart.forEach(item => idArr.push(item.id));
      if (idArr.length <= 0) {
        return;
      }
      this.$ajax
        .request({
          url:
            "http://www.liulongbin.top:3005/api/goods/getshopcarlist/" +
            idArr.join(","),
          method: "GET"
        })
        .then(ret => {
          if (ret.data.status === 0) {
            this.list = ret.data.message;
          }
        });
    },
    onSubmit() {
      //提交订单按钮
      this.load = true;
    },
    selectedChanged(id, val) {
      // 每当点击开关，把最新的 快关状态，同步到 store 中
      console.log(id + " --- " + val);
      this.$store.commit("updateGoodsSelected", { id, selected: val });
    }
  },
  components: {
    numbox
  }
};
</script>

<style scoped>
.barsubit {
  position: fixed;
  bottom: 50px;
}
.vancard img {
  margin-left: 15px;
}
.van-card__header {
  margin-left: 10px;
}
.cardbox {
  height: 110px;
}
.check{
  margin: 35px 0 0 -25px;
}
.numbox{
  margin: -35px 0 0 0;
}
.box{
    margin-bottom: 200px;
    margin: 46px 0 150px 0;
}
</style>